import { Link } from 'react-scroll';

import { Container, Wrapper } from '@/shared/ui';
import { Footer } from '@/widgets/Footer';
import { Header } from '@/widgets/Header';

import cs from './Company.module.scss';
import { useCompanyBlocks } from './config';

export const Company = () => {
  const blocks = useCompanyBlocks().filter((block) => block.body);
  return (
    <div className={cs.container}>
      <Header className={cs.header} />
      <Wrapper className={cs.wrapper}>
        <Container className={cs.wrap}>
          <div className={cs.page}>
            <div className={cs.card}>
              <div className={cs.floating_card_container}>
                <div className={cs.floating_card}>
                  <div className={cs.card_buttons}>
                    {blocks.map(({ id, title }) => (
                      <Link
                        className={cs.card_button}
                        data-testid={`button-scroll_to_${id}`}
                        duration={400}
                        key={id}
                        offset={-120}
                        smooth
                        spy
                        to={id}
                      >
                        {title}
                      </Link>
                    ))}
                  </div>
                </div>
              </div>
            </div>
            <div className={cs.info_blocks}>
              <div className={cs.course_info}>
                {blocks.map(({ id, body }) => (
                  <div id={id} key={id}>
                    {body}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </Container>
      </Wrapper>
      <Footer className={cs.footer} />
    </div>
  );
};
